import React from "react";
import {connect} from "react-redux"
import "../css/Cart.css"
import {changeItemStatus,allSelect} from "../route/actions"


class Cart extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <div>
            <div className="cart_add">
           <ul>
               {
                   this.props.cartItems.map((element,index)=>{
                    return <li key={index}>
                        <div>
                            <input type="checkbox"
                            checked={element.checked}
                             onChange={(event)=>{
                                console.log(event.target.checked);
                                var item ={
                                    _id:element._id,
                                    checked:event.target.checked
                                }
                                this.props.itemChecked(changeItemStatus(item))
                            }}></input>
                        </div>
                        <div>
                            <img src={element.productImage}></img>
                        </div>
                        <div>
                        <h3>{element.productName}</h3>
                            <p className="p">{element.salePrice}￥</p>
                        </div>
                        <div>
                            {element.count}
                        </div>
                    </li>
                   })
               }
               <div>{`总量${this.props.totalCount}`}</div>
               <div>全选
                   <input type="checkbox" onChange={(event)=>{
                       this.props.selectAll(allSelect(event.target.checked))
                   }}></input>
               </div>
           </ul>
        </div>
        </div>
    );
  }
}

function mapStateToProps(rootReducer){
    return {
        cartItems:rootReducer.cartReducer.cartList,
        totalCount:rootReducer.cartReducer.totalCont
    }
}

function mapActionTOProps(dispatch){
return {
    itemChecked:(action)=>{
        dispatch(action)
    },
    selectAll:(action)=>{
        dispatch(action)
    }
}
}




export default connect(mapStateToProps,mapActionTOProps)(Cart);
